<template>
  <div class="user-list">
    <page-header title="用户列表">
      <page-search :config="searchConfig" :model="searchModel" @search="getData">
        <el-button @click="exportExcel">导出学员信息</el-button>
      </page-search>
    </page-header>
    <el-table
      :data="tableData"
      :cell-class-name="setCellClassName"
      :max-height="clientHeight - 350"
      >
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :min-width="column.minWidth"
        :label="column.label">
        <template slot-scope="{ row }">
          <el-avatar v-if="column.prop === 'avatar'" :size="42" :src="row.avatar"></el-avatar>
          <template v-else>{{row[column.prop]}}</template>
        </template>
      </el-table-column>
    </el-table>
    <page-pagination
      :pageSize="pageSize"
      :currentPage="pageNum"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import { saveExcel } from '@/utils';
import paginationMixin from '@/mixins/pagination';
import { getUserList } from '@/api/user';

export default {
  data() {
    return {
      searchConfig: [
        {
          type: 'input',
          label: '微信昵称',
          prop: 'nickname',
        },
        {
          type: 'input',
          label: '学号',
          prop: 'studentNo',
        },
        {
          type: 'input',
          label: '家长电话',
          prop: 'phone',
        },
        {
          type: 'input',
          label: '省份',
          prop: 'province',
        },
        {
          type: 'input',
          label: '市区',
          prop: 'city',
        },
        {
          type: 'daterange',
          label: '注册时间',
          prop: 'registerAt',
        },
      ],
      searchModel: {
        nickname: '',
        studentNo: '',
        phone: '',
        province: '',
        city: '',
        registerAt: '',
      },
      columns: [
        { prop: 'nickname', label: '微信昵称', minWidth: '100px' },
        { prop: 'avatar', label: '头像', minWidth: '100px' },
        { prop: 'area', label: '所在地区', minWidth: '140px' },
        { prop: 'studentNo', label: '学号', minWidth: '80px' },
        { prop: 'consumeAmount', label: '消费金额', minWidth: '80px' },
        { prop: 'leoyooCommission', label: '推广收益', minWidth: '80px' },
        { prop: 'phone', label: '家长电话', minWidth: '80px' },
        { prop: 'createTime', label: '注册时间', minWidth: '140px' },
      ],
      tableData: [],
      formData: {
        accountName: '',
        realName: '',
        password: '',
        rePassword: '',
        roleType: '',
      },
      isCreate: true,
      isModify: false,
      isModifyPassword: false,
      pageSize: 10,
      currentPage: 1,
      total: 100,
    };
  },
  mixins: [paginationMixin],
  computed: {
    formatParams() {
      const [startTime, endTime] = this.searchModel.registerAt;
      const params = {
        ...this.searchParams,
        startTime,
        endTime,
      };
      delete params.registerAt;
      return params;
    },
  },
  methods: {
    async exportExcel() {
      const schemaMap = [
        { prop: 'nickname', label: '微信昵称' },
        { prop: 'studentNo', label: '学号' },
        { prop: 'area', label: '所在地区' },
        { prop: 'consumeAmount', label: '缴费累计金额' },
        { prop: 'phone', label: '家长电话' },
      ];
      const { list } = await getUserList({
        ...this.formatParams,
        pageSize: this.total,
        pageNum: 0,
      });
      const sheetData = this.formatData(list);
      saveExcel({
        schemaMap,
        sheetData,
        fileName: '学员信息表',
      });
    },
    setCellClassName({ column }) {
      if (column.property === 'avatar') {
        return 'image-cell';
      }
      return '';
    },
    async getData() {
      const result = await getUserList(this.formatParams);
      const { total, list } = result;
      this.total = total;
      this.tableData = this.formatData(list);
    },
    formatData(list) {
      return list.map((item) => {
        const { createTime, province, city } = item;
        return {
          ...item,
          area: `${province}${city}`,
          createTime: this.$formatTime(createTime),
        };
      });
    },
  },
  async created() {
    this.getData();
  },
};
</script>
